<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<title>个人中心</title>
	<link href="/css/mui.min.css" rel="stylesheet"/>
	<!--mui 图片放大及滑动效果的css-->
	<!--<link rel="stylesheet" type="text/css" href="/resources/css/mui.img.zoom.css">-->

	<style>

		body {
			background-color: #efefef;
		}

		.mui-content{
			background-color: #f3f2f5;
			border-top-color: #d5d8da;
		}
		.mui-bar{
			border-bottom: 1px solid #d5d8da;
		}
		.mui-bar-nav{
			box-shadow: 0px 0;
		}
		html{
			font-size: 62.5%;
		}

		/*返回按钮样式*/
		.mui-icon-back:before, .mui-icon-left-nav:before {
			color: #ffffff;
		}

		.mui-bar.mui-bar-footer li a img {
			width: 29%;
			height: 29%;
		}

		/*底部主菜单样式*/

		.mui-table-view .mui-media-object {
			height: 70px;
			max-width: 100px;
		}

		.mui-table-view.mui-grid-view .mui-table-view-cell {
			margin-right: 0px;
		}

		.mui-table-view.mui-grid-view .mui-table-view-cell {
			width: 12%;
		}

		/* 去ul设置的下划线 */
		.mui-bar-footer.mui-bar .mui-table-view.mui-grid-view:before,.mui-bar-footer.mui-bar .mui-table-view.mui-grid-view:after {
			position: static;
		}

		/*.mui-table-view:before {
            position: static;
        }
        .mui-table-view:after {
            position: static;
        }*/

		/*设置每个li的下划线*/
		.mui-table-view-cell:after {
			background-color: #e1e1e1;
		}

		.mui-table-view.mui-grid-view .mui-table-view-cell .mui-media-body{
			font-size: 8px;
			margin-top:4px;
			color: #999999;
			text-align: center;
			line-height: normal;
		}

		.mui-table-view.mui-grid-view .mui-table-view-cell .mui-media-body.mui-active{
			font-size: 8px;
			margin-top:4px;
			color: #368cf3;
			text-align: center;
			line-height: normal;
		}

		.mui-table-view.mui-grid-view .mui-table-view-cell {
			padding: 10px 0 0 0;
			border: 0px solid red;
			width:11%;
		}

		/*上部下划线样式*/
		.mui-bar-footer.mui-bar:before {
			position: absolute;
			content: '';
			color: black;
		}

		.mui-bar-footer.mui-bar:before {
			top: -1px;
			width: 100%;
			background-color: #d7d6dc;
			height: 1px;
			-webkit-transform: scaleY(.5);
			transform: scaleY(.5);
			left: 0px;
			box-shadow: none;
		}

		.mui-table-view .mui-media, .mui-table-view .mui-media-body {
			overflow: visible;
		}

		/*下部图片*/
		.mui-table-view.mui-grid-view .mui-table-view-cell .mui-media-object {
			width:45%;
		}

		/*图片和文字*/
		.mui-bar-footer.mui-bar .mui-table-view.mui-grid-view .mui-table-view-cell.mui-media {
			width: 40px;
			height: 37px;
		}

		.mui-bar-footer.mui-bar .mui-table-view.mui-grid-view .mui-table-view-cell.mui-media .mui-media-body {
			text-align: center;
			/*margin-top: 0px;*/
			width: 97.51%;
			/*height: 15px;*/
		}

		/*主要内容*/
		.mui-content>.mui-table-view:first-child {
			margin-top: 0px;
		}

		.mui-bar-footer~.mui-content {
			padding-bottom: 56px;
		}

		.mui-table-view {
			background-color: #f9f9f9;
		}

		/*.mui-table-view.mui-table-view-chevron:before {
            width: 100%;
            background-color: #d7d6dc;
            height: 1px;
            -webkit-transform: scaleY(.5);
            transform: scaleY(.5);
        }*/
		.mui-table-view:before, .mui-table-view:after{
			background: #d7d6dc;
		}

		/*头像右侧箭头*/
		.mui-table-view-chevron .mui-table-view-cell>a:not(.mui-btn) {
			margin-right: 0px;
		}

		.disabled {
			pointer-events: none;
		}

	</style>
</head>
<body>
<header class="mui-bar mui-bar-nav" style="background-color: #368cf3;padding-right: 3.335%;">
	<!--<a id="back" class="mui-icon mui-icon-left-nav mui-pull-left"></a>-->
	<!--<a class="mui-icon mui-icon-bars mui-pull-left mui-plus-visible"></a>-->
	<h1 class="mui-title" style="color: #ffffff; font-size: 17px;">个人中心</h1>
	<!--<a href="/my/setting.html" id="setting" style="float: right;padding: 0px;width: 5.625%;height: 44.2%;margin-top: 3.7%;text-align: center;">-->
		<!--<img src="/images/nav_set@3x.png" style="width: 89.5%;">-->
	<!--</a>-->
</header>


<!--主界面部分-->
<div class="mui-content" style="">
	<ul class="mui-table-view mui-table-view-chevron" style="margin-top: 4.17%;margin-bottom: 2.78%;">
		<li class="mui-table-view-cell mui-media" style="padding: 3.196% 0px 3.196% 4.17%;" >
			<a class="mui-navigate-right" href="#">
				<img id="logo" class="mui-media-object mui-pull-left" style="border-radius: 50%; width: 80px; height: 80px;" src="/images/logo.png">
				<div class="mui-media-body" style="padding: 3.476% 0px;">
					用户名：<span style="font-size: 15px;color: #333333;" id="name"></span>
					<p class='mui-ellipsis' style="font-size: 12px;color: #666666;line-height: 12px;margin-top: 2.897%;" id="mobile">普通会员</p>
				</div>
			</a>
		</li>
	</ul>
	<ul class="mui-table-view" style="margin-bottom: 2.78%;padding-left: 0px;">
		<li class="mui-table-view-cell" data-href=my/my_coupon.html id="mycoupon">
			<a class="mui-navigate-right" href="#">
				<img src="/images/img_reader@3x.png" style="width: 15px; height: 15px;margin-right: 3.035%;vertical-align: middle;"><span style="font-size: 1.4rem;line-height: 14px;">我的兑换券</span>
			</a>
		</li>
	</ul>

	<ul class="mui-table-view" style="margin-bottom: 2.78%;">

		<li class="mui-table-view-cell" id="chart">
			<a class="mui-navigate-right" href="#" >
				<img src="/images/img_service@3x.png" style="width: 15px; height: 15px; margin-right: 2%;vertical-align: middle;">
				<span style="font-size: 1.4rem;">客服热线</span>
				<span style="float: right; margin-right: 26px; font-size: 13px; color: #666666;">4006500186</span>
			</a>
		</li>
	</ul>
</div>



<script src="/js/mui.min.js"></script>
<script src="/js/app.js"></script>
<script>

	/**
	 * 全局变量
	 */

    /**
     * 初始化
     */
    mui.init({
    });

    mui.ready(function () {
		var userid = sessionStorage.getItem("userid");
		if (userid) {
		} else {
			mui.openWindow({
				url: app.ip + 'login.html',
				id: 'login'
			});
		}
		var username = sessionStorage.getItem("mobile");
        document.getElementById('name').innerText=username;

        mui('.mui-content ul').on('tap', 'li', function (e) {
            var pageUrl = mui(this)[0].getAttribute('data-href');
            if(pageUrl) {
                mui.openWindow({
                    url: app.ip + pageUrl,
                    id: 'pageUrl'
                });
            }
        });

    })

</script>
</body>
</html>